<template>
  <div :id="id" class="chart-container" :style="{ width, height }">图表未初始化</div>
</template>

<script setup>
import { ref, watch, onMounted, markRaw } from 'vue'
import barOptions from './js/barOptions'
import barStackOptions from './js/barStackOptions'
import barGradientOptions from './js/barGradientOptions'
import lineOptions from './js/lineOptions'
import pieOptions from './js/pieOptions'
import IsEmpty from './js/commonUtil'
import customed from './theme/customed.json'
import dark from './theme/dark.json'
import * as echarts from 'echarts'
import { useDark } from '@vueuse/core'
const props = defineProps({
  id: {
    type: String,
    default: 'chart'
  },
  type: {
    type: String,
    validator(value) {
      return ['bar', 'line', 'pie', 'barStack', 'barGradient'].includes(value)
    }
  },
  width: String,
  height: String,
  options: Object
})
let chartInstance = ref(null)
let chartType = ref({})
const isDark = useDark()
watch(isDark, () => {
  echarts.dispose(echarts.init(document.getElementById(props.id)))
  setEchartOption(chartType.value)
})
watch(
  () => props.height,
  (value) => {
    chartInstance.value.getDom().style.height = value.toString()
    chartInstance.value.resize()
  },
  { deep: true }
)
watch(
  () => props.options,
  (value) => {
    if (chartInstance.value && value) {
      const theme = window.localStorage.getItem('vueuse-color-scheme')
      chartInstance.value.showLoading(null, {
        text: '',
        color: '#478eff',
        spinnerRadius: 16,
        lineWidth: 2,
        textColor: '',
        maskColor: theme === 'dark' ? 'rgba(27, 47, 79, 0.8)' : 'rgba(255, 255, 255, 0.9)'
      })
      setTimeout(() => {
        chartInstance.value.hideLoading()
        chartInstance.value.dispose()
        setEchartOption(chartType.value)
      }, 500)
    }
  },
  { deep: true }
)
onMounted(() => {
  echarts.registerTheme('dark', dark)
  echarts.registerTheme('customed', customed)
  chartType.value = getChartType(props.type)
  // 基于准备好的dom，初始化echarts实例
  setEchartOption(chartType.value)
})
const getChartType = (type) => {
  let chartType = {}
  // 绘制图表
  switch (type) {
    case 'bar':
      chartType = barOptions
      break
    case 'line':
      chartType = lineOptions
      break
    case 'pie':
      chartType = pieOptions
      break
    case 'barStack':
      chartType = barStackOptions
      break
    case 'barGradient':
      chartType = barGradientOptions
      break
    default:
      break
  }
  return chartType
}
const setEchartOption = (chartType) => {
  const theme = window.localStorage.getItem('vueuse-color-scheme')
  if (theme === 'dark') {
    chartInstance.value = markRaw(echarts.init(document.getElementById(props.id), 'dark'))
  } else {
    chartInstance.value = markRaw(echarts.init(document.getElementById(props.id), 'customed'))
  }
  chartInstance.value.setOption(chartType)
  chartInstance.value.showLoading(null, {
    text: '',
    color: '#478eff',
    spinnerRadius: 16,
    lineWidth: 2,
    textColor: '',
    maskColor: theme === 'dark' ? 'rgba(27, 47, 79, 0.8)' : 'rgba(255, 255, 255, 0.9)'
  })
  if (IsEmpty(props.options)) {
    setTimeout(() => {
      chartInstance.value.hideLoading()
    }, 10000)
  } else {
    chartInstance.value.hideLoading()
    chartInstance.value.setOption(props.options)
  }
  // 图标区域光标变箭头
  chartInstance.value.getZr().on('mousemove', (params) => {
    const pointInPixel = [params.offsetX, params.offsetY]
    if (chartInstance.value.containPixel('grid', pointInPixel)) {
      chartInstance.value.getZr().setCursorStyle('default')
    }
    // 饼图特殊处理 折线图特殊处理
    if ((props.type === 'pie' || props.type === 'line') && params.target) {
      if (JSON.stringify(params.target.style) !== '{}') {
        chartInstance.value.getZr().setCursorStyle('default')
      }
    }
  })
  window.addEventListener('resize', () => {
    chartInstance.value.resize()
    setTimeout(() => {
      chartInstance.value.resize()
    }, 0)
  })
}
</script>

<style scoped>
.chart-container {
  height: 300px;
}
</style>
